
<template>
  <div class="bg">
    <div class="project-container">
      <div class="project_title">
        {{projectName}}
      </div>
      <div style="text-align-last: right;margin:10px">
        <el-link type="danger" :underline="false" @click="logout" class="el-icon-s-custom">退出登录</el-link>
      </div>
      <el-form ref="form" :inline="true" :model="queryParam" label-width="80px">
        <!-- <el-form-item label="工程名" class="font">
          <el-input v-model="queryParam.name" placeholder="请输入工程名" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="工程人员" class="font">
          <el-input v-model="queryParam.engineer" placeholder="请输入工程人员" style="width:100%"></el-input>
        </el-form-item> -->
        <el-form-item label="">
          <el-button type="primary" style="float: right;" @click="queryList">查询</el-button>
          <el-button type="primary" style="float: right;margin-right:20px" @click="open=true">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table
              :border="true"
              :data="tableData"
              style="width: 100%">
        <el-table-column
                prop="number"
                label="序号"
                type="index"
                width="80"
                align="center"
        />
        <el-table-column
                prop="loginName"
                label="帐号">
        </el-table-column>
        <el-table-column
                prop="password"
                label="密码">
        </el-table-column>
        <el-table-column
                prop="name"
                label="昵称">
        </el-table-column>
        <el-table-column
                prop="createTime"
                label="创建时间">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="200px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toDelete(scope.row)" v-if="scope.row.id !== 1">删除</el-button>
            <el-button type="text" size="small" @click="toEdit(scope.row)" >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align-last: right;margin:10px">
        <el-button :underline="false" size="mini" type="warning" class="el-icon-reading" @click="routeJump">去工程列表</el-button>
      </div>
      <el-dialog
              title="新增用户"
              :visible.sync="open"
              width="25%"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="帐号">
            <el-input v-model="form.loginName"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="open=false" >取消</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import { list, edit, del } from '@/api/user'
     import { getLoginName } from '@/utils/auth.js'
  export default {
    name: 'Project',
    data() {
      return {
       tableData:[],
       form:{},
       open:false,
       queryParam:{
         name:'',
         engineer:''
       },
       getLoginName:undefined
      }
    },
    created() {
      this.queryList()
      this.getLoginName = getLoginName()
    },
    methods: {
      queryList(){
        list(this.queryParam).then(res =>{
          this.tableData = res.data.data
        })
      },
      onSubmit(){
        edit(this.form).then(res =>{
          if(res.data.code === 200){
            this.open=false
            this.$message.success("操作成功!")
            this.queryList()
          }else{
            this.$message.error(res.data.message)
          }
        })
      },
      toEdit(row){
        this.open=true
        this.form = Object.assign({},row)
      },
      toDelete(row){
        del(row).then(res =>{
          if(res.data.code === 200){
            this.$message.success("删除成功!")
            this.queryList()
          }else{
            this.$message.error("删除失败,请重试!")
          }
        })
      },
      routeJump(){
        this.$router.push({path:'/project'})
      },
      logout(){
        this.$router.push({path:'/login'})
      }
    }
  }
</script>
<style>
  .font .el-form-item__label{
    color: aliceblue;
  }
  .project-container {
    padding: 5% 10% 0 10%;
    width: 80%;
    height: 80%;
  }
  .bg{
    width: 100%;
    height: 100%;
    background-image: url("../assets/list-bg.jpg");
    background-size: cover;
  }
</style>
